<template>
	<div class="login-box">
		<!-- 顶部菜单栏 -->
		<loginHeader />
		<div class="login-box-form">
			<!-- 左右布局 -->
			<div class="login-box-form-left">
				<img src="/public/teamwork.svg" alt="" />
			</div>
			<div class="login-box-form-right">
				<div class="logo">
					<img src="/public/logo.svg" alt="" />
				</div>
				<h2 class="title">easy-cooperation</h2>
				<transition>
					<RegisterForm v-if="formStatus === 'register'" @goto-login="formStatus = 'login'" />
					<LoginForm v-else-if="formStatus === 'login'" @goto-register="formStatus = 'register'" @forget-password="formStatus = 'forgetPassword'" />
					<ForgetPasswordForm v-else-if="formStatus === 'forgetPassword'" @goto-login="formStatus = 'login'" @goto-register="formStatus = 'register'" />
				</transition>
			</div>
		</div>
		<div class="login-box-copyright"><a-divider>Copyright (c) 2025 ~朴：shu</a-divider></div>
	</div>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';
import LoginForm from './components/LoginForm.vue';
import loginHeader from './components/Header.vue';
import RegisterForm from './components/RegisterForm.vue';
import ForgetPasswordForm from './components/ForgetPasswordForm.vue';

// 当前 form 表单状态 - 仅用于切换不同的表单
type TFormStatus = Ref<'login' | 'register' | 'forgetPassword'>;
const formStatus: TFormStatus = ref('login');
</script>

<style lang="less" scoped>
.login-box {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.login-box-form {
	flex: auto;
	display: flex;
	align-items: center;
	backdrop-filter: blur(10px);
}
.login-box-form > div {
	user-select: none;
	height: 100%;
	width: 50%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.login-box-form-left img {
	filter: drop-shadow(0 0 2em rgba(113, 196, 239, 0.667));
}

.login-box-form-right {
	.logo {
		width: 80px;
		height: 80px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		transition: all 0.3s;
		color: var(--colorText);
		font: 700 200% Consolas, Monaco, monospace;
		margin: 15px 0;
		text-transform: uppercase;
	}
}

.login-box-copyright {
	display: flex;
	justify-content: center;
	.ant-divider-with-text {
		font-size: 14px;
		color: var(--colorTextQuaternary);
		transition: all 0.3s;
	}
	.ant-divider-horizontal.ant-divider-with-text::before,
	.ant-divider-horizontal.ant-divider-with-text::after {
		transition: all 0.3s;
		border-block-start-color: var(--colorBorder);
	}
}

.v-enter-active,
.v-leave-active {
	transition: all 0.5s ease;
}

.v-enter-from,
.v-leave-to {
	height: 0;
	opacity: 0;
	transform: scale(0);
}
</style>
